<script setup>
	defineProps({
		title: {
			type: [String, Boolean],
			default: false,
		},
		width: {
			type: [Number, String],
			default: "100%"
		},
		height: {
			type: [Number, String],
			default: "fit-content"
		},
		direction: {
			type: String,
			default: "vertical",
			validator: value => ["horizontal", "vertical", "mix"].includes(value),
		}
	})
</script>

<template>
	<div :class="['panel', direction]" :style="{width: typeof width === 'number' ? (width + 'px') : width, height: typeof height === 'number' ? (height + 'px') : height }">
		<div v-if="title !== false" class="panel-header">
			<slot name="title">
				<div class="panel-title">{{ title }}</div>
			</slot>
		</div>
		<div class="panel-content">
			<slot />
		</div>
	</div>
</template>

<style scoped lang="less">
	.panel {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: fit-content;
		padding: 16px;
		border-radius: 5px;
		background-color: #fff;
		box-shadow: 0 0 5px #ddd;
		& + .horizontal {
			margin-left: 16px;
		}
		& + .vertical {
			margin-top: 16px;
		}
		& + .mix {
			margin-top: 16px;
			margin-left: 16px;
		}
		.panel-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 26px;
			.panel-title {
				color: #333;
				font-size: 16px;
			}
		}
		.panel-content {
			flex-grow: 1;
			width: 100%;
			overflow: auto;
		}
	}
</style>